<template>
	<view>
		<view v-if="(product_info || null) != null" class="page-bottom-fixed">
			<!-- #ifdef MP-WEIXIN || MP-QQ || MP-KUAISHOU || H5 || APP-PLUS -->
			<!-- 小导航 -->
			<view class="top-nav-left-icon pf" :style="'top:' + top_nav_icon_top_value + 'px;'">
			    <uni-icons type="arrow-left" size="22" color="#333" class="icon round cp" @tap="top_nav_left_back_event"></uni-icons>
			</view>
			<!-- #endif -->
			
			<!-- 轮播 -->
			<view class="bg-white" v-if="(product_info.banner || null) != null && product_info.banner.length > 0">
				<component-banner propTopType="2" :diyTheme="diytheme" propSize="block" :propData="product_info.banner" propImgNoRadius="true" @changeBanner="change_banner"></component-banner>
			</view>
			<view v-else class="zhankong">
				
			</view>
			
			<!-- 店铺信息区域 --> 
			<view class="shop-info-wrap">
				<view class="shop-info">
					<view class="logo-wrapper">
						<image :src="profile.logo" class="shop-logo" mode="aspectFill" />
					</view>
					<view class="info-main">
						<view class="name-line">
							<text class="shop-name">{{ profile.name }}</text>
							<view class="favorite-btn" :class="{ collected: isCollected }" @click="soucang">
								<view class="favorite-btn-cc">
									<uni-icons v-if="isCollected" class="spi" type="star-filled" size="22" color="#ff0000"></uni-icons>
									<uni-icons v-else class="spi" type="star" size="22" color="#cccccc"></uni-icons>
									<text class="favorite-text" :class="{ 'favorited': isCollected }">{{ isCollected ? $t('goods-detail.goods-detail.by7052')+$t('goods-detail.goods-detail.dco1sc') : $t('goods-detail.goods-detail.dco1sc') }}</text>
								</view>
							</view>
						</view>
					</view>
					<text class="shop-desc">{{ profile.com_describe }}</text>
				</view>
			</view>
			<!-- 导航 -->
			<view class="padding-horizontal-main" v-if="(product_info.nav || null) != null && product_info.nav.length > 0">
				<component-icon-nav :diyTheme="diytheme" :propData="{...{data: product_info.nav}, ...{random: random_value}}" :propColor="diytheme.main_color"></component-icon-nav>
			</view>
			
			<!-- 商品 -->
			<block v-if="(product_info.data || null) != null && product_info.data.length > 0">
				<view v-for="(floor, index) in product_info.data" :key="index">
					<view class="fccprouniapp_box">
						<component-title :diyTheme="diytheme" propTitleType="0" :propTitle="floor.cat.name" :propMoreUrl="'/pages/fcc/classinfo/product-search/product-search?shop_id='+params.id+'&category_id='+floor.cat.id"></component-title>
						
						<view class="wh-auto oh pr margin-top">
							<block v-if="floor.list.length > 0">
								<component-goods-list :diyTheme="diytheme" :propData="{style_type: 1, goods_list: floor.list}" :propIsCartParaCurve="true" propOneLineNum="2" :propIsShowPrice="false"></component-goods-list>
							</block>
						</view>
					</view>
				</view>
			</block>
			
			<!-- 底部tabBar -->
			<component-classinfo-footer :propData="product_info.footer_data" propStatus="1"></component-classinfo-footer>
		</view>
		<view v-else>
		    <!-- 提示信息 -->
		    <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
		</view>
		
		<!-- 分享弹窗 -->
		<component-share-popup :diyTheme="diytheme" ref="share"></component-share-popup>
		
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp();
	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	import componentNoData from '@/components/no-data/no-data';
	import componentPopup from "@/components/popup/popup";
	import componentClassinfoFooter from '../public/footer-shop';
	import componentBanner from "@/components/slider/slider";
	import componentIconNav from "@/components/icon-nav/icon-nav";
	import componentGoodsList from "@/components/goods-list/goods-list";
	import componentTitle from '@/components/title/title';
	import {classinfo_base_info} from '@/pages/fcc/classinfo/public/common.js';
	import componentSharePopup from "@/components/share-popup/share-popup";
	
	var common_static_url = app.globalData.get_static_url('common');
	var static_url_mini = app.globalData.get_static_url('classinfo', true);
	
	var system_info = app.globalData.get_system_info() || {};
	var bar_height = parseInt(system_info.statusBarHeight || 0);
	export default {
		data() {
			return {
				common_static_url: common_static_url,
				static_url_mini: static_url_mini,
				permissionID: '',
				peraction: '',
				params: null,
				user: null,
				data_base: null,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				data_bottom_line_status: false,
				profile: null,
				diytheme: app.globalData.get_fcc_theme_color() || null,
				share_info: null,
				product_info: null,
				random_value: 0,
				isCollected: false,
				// 顶部导航信息
				// #ifdef MP || APP-PLUS
				top_nav_icon_top_value: bar_height + 8,
				// #endif
				// #ifdef H5
				top_nav_icon_top_value: 6,
				// #endif
			}
		},
		components: {
			// #ifdef APP-PLUS
			ykAuthpup,
			// #endif
		    componentNoData,
			componentPopup,
			componentClassinfoFooter,
			componentBanner,
			componentIconNav,
			componentSharePopup,
			componentGoodsList,
			componentTitle
		},
		onLoad(params) {
			// 调用公共事件方法
		    app.globalData.page_event_onload_handle(params);
		
		    // 参数处理
		    params = app.globalData.launch_params_handle(params);
		
		    // 设置参数
			this.setData({
				params: params,
			});
			
			// 数据加载
			this.init();
		},
		
		onShow() {
			app.globalData.page_event_onshow_handle();
			
			this.setData({
				random_value: Math.random(),
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
		    this.init();
		},
		methods: {
			init() {
				classinfo_base_info()
				.then(data=>{
					var user = app.globalData.get_user_cache_info();
					if (user != null) {
						this.setData({
							user: user,
							data_base: data
						});
					}else{
						this.setData({
							data_base: data
						});
					}
					this.get_data();
				});
			},
			// 初始化
			get_data() {
			    uni.showLoading({
			        title: this.$t('common.loading_in_text'),
			    });
			    uni.request({
			        url: app.globalData.get_request_url('shopdetail', 'index', 'classinfo'),
			        method: 'POST',
			        data: {
			            id: this.params.id || 0,
						is_product: 1,
			        },
			        dataType: 'json',
			        success: (res) => {console.log(res.data);
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            var data = res.data.data;
			            if (res.data.code == 0 && (data.data || null) != null) {
			                var info = data.data || null;
			                var base = data.base || null;
			                this.setData({
			                    data_bottom_line_status: true,
			                    data_list_loding_status: 3,
			                    profile: info,
								product_info: data.product_info || null,
								isCollected: data.product_info.is_soucang == 1 ? true : false,
			                });
			
			                if (info != null) {
			                    // 基础自定义分享
			                    this.setData({
			                        share_info: {
			                            title: info.name,
			                            desc: info.com_describe,
			                            path: '/pages/fcc/classinfo/companyshop-detail/companyshop-detail',
			                            query: 'id=' + info.id,
			                            img: info.logo,
			                        },
			                    });
			
			                    // 标题
			                    uni.setNavigationBarTitle({ title: info.name });
			                }
			            } else {
			                this.setData({
			                    data_list_loding_status: 0,
			                    data_list_loding_msg: res.data.msg,
			                });
			                app.globalData.showToast(res.data.msg);
			            }
			
			            // 分享菜单处理
			            app.globalData.page_share_handle(this.share_info);
			        },
			        fail: () => {
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2,
			            });
			            app.globalData.showToast(this.$t('common.internet_error_tips'));
			        },
			    });
			},
			
			// 搜藏功能 
			soucang(){
				if(!app.globalData.is_single_page_check()) {
				    return false;
				}
				var user = app.globalData.get_user_info(this, 'soucang');
				if (user != false) {
					uni.showLoading({
						title: this.$t('common.processing_in_text'),
					});
					uni.request({
						url: app.globalData.get_request_url('favor', 'shop', 'classinfo'),
						method: 'POST',
						data: {
							id: this.params.id || 0,
						},
						dataType: 'json',
						success: res => {
							uni.hideLoading();
							if (res.data.code == 0) {
								this.setData({
									isCollected: res.data.data == 1 ? true : false,
								});
								app.globalData.showToast(res.data.msg, 'success');
							} else {
								if (app.globalData.is_login_check(res.data, this, 'soucang')) {
									app.globalData.showToast(res.data.msg);
								}
							}
						},
						fail: () => {
							uni.hideLoading();
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						}
					});
				}
			},
			
			// #ifdef APP-PLUS
			//用户授权权限后的回调
			changeAuth(e){
				if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
				{
					if(this.peraction == 'previewImage')
					{
						app.globalData.save_image_by_url(e);
					}
				}else{
					app.globalData.call_tel(e);
				}
			},
			// #endif
			
			// 返回事件
			top_nav_left_back_event(e) {
			    app.globalData.page_back_prev_event();
			},
			
			change_banner(){
				
			}
		}
	}
</script>
<style lang="scss">
/* 新增容器样式 */
.shop-info-wrap {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

/* 店铺信息主区块 */
.shop-info {
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 30rpx 30rpx;
  margin: 0rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
}

/* LOGO容器完整样式 */
.logo-wrapper {
  position: absolute;
  top: -60rpx;
  left: 20rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 20rpx;
  background: #fff;
  padding: 6rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  z-index: 2;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2rpx solid rgba(0,0,0,0.08);
    border-radius: 18rpx;
    box-sizing: border-box;
  }

  .shop-logo {
    width: 100%;
    height: 100%;
    border-radius: 14rpx;
    background: #f5f5f5;
    overflow: hidden;
  }
}

/* 信息主区域完整样式 */
.info-main {
  margin-left: 160rpx;

  .name-line {
    display: flex;
    align-items: center;
    margin-bottom: 35rpx;

    .shop-name {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      margin-right: 20rpx;
      max-width: 350rpx;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

/* 收藏按钮完整样式 */
.favorite-btn {
  margin-left: auto;
}
.favorite-btn-cc{
	display: flex;
}
.favorite-text {
	  font-size: 28rpx;
	  color: #cccccc;
	  transition: color 0.3s;
	}
	
	.favorite-text.favorited {
	  color: #ff4757;
	}
 
/* 描述文字完整样式 */
.shop-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>
<style>
	@import './companyshop-detail.css';
</style>